<template>
  <div class="container">
    <normal-title
      title='产品详情'
      :back="true"
    ></normal-title>
    <!-- 轮播图开始 -->
    <swiper
      class="swiper"
      indicator-active-color="#cdb27e"
      indicator-dots=true
      indicator-color="#747474"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      :circular="true"
      v-if="product!==null&&product.swiperImgs"
    >
      <div
        v-for="(item, index) in product.swiperImgs"
        :key='index'
      >
        <swiper-item><img
            class="swiper-item"
            :src="item.image"
            mode="aspectFit"
          >
        </swiper-item>
      </div>
    </swiper>
    <!-- 轮播图结束 -->
    <div class="detail-title">
      <div class="row">
        <p
          v-if='product!==null&&product.specType.length>0'
          class="vip_price"
        >￥{{product.specType[activedSpec].price}}</p>
        <p class="vip_text">会员价</p>
        <!-- <p class="normal_text">原价：</p>
        <p class="normal_price">￥{{product.headerParam.original_price}}</p> -->
      </div>
      <div
        class="detail_title_text"
        v-if="product!==null&&product.headerParam"
      >
        {{product.headerParam.description}}
      </div>
    </div>
    <div class="slice"></div>
    <!-- 规格栏开始 -->
    <div
      class="spec"
      v-if="product!==null&&product.specType.length>0"
    >
      <div class="row start-item">
        <div class="spec_name">规格</div>
        <div class="spec-cate">
          <div
            @click="activedSpec=index"
            :class="activedSpec==index?'spec_content spec_content_selected':'spec_content'"
            v-for="(item,index) in product.specType"
            :key="index"
          >{{item.content}}</div>
        </div>
      </div>
      <div
        class="row"
        v-if="product!==null&&product.headerParam"
      >
        <div class="spec_name">库存</div>
        <div class="spec_val">{{product.headerParam.stock}}</div>
      </div>
      <div
        class="slice"
        style="height: 3rpx; margin:10rpx 0 20rpx;"
      ></div>
      <div class="spec-table">
        <div
          class="spec-table-item"
          v-for="(item,index) in product.specItems"
          :key="index"
        >
          <div class="spec_name">{{item.key}}</div>
          <div class="spec_val">{{item.value}}</div>
        </div>
      </div>
    </div>
    <!-- 规格栏结束 -->
    <div class="slice"></div>

    <!-- 产品和评论导航按钮开始 -->
    <div class="row around">
      <div
        :class="showType==0?'product-detail-togglebtn selected':'product-detail-togglebtn '"
        @click="toggleShowType(0)"
      >产品详情</div>
      <div
        :class="showType==1?'comment-togglebtn selected':'comment-togglebtn'"
        @click="toggleShowType(1)"
      >评&nbsp;论</div>
    </div>
    <!-- 产品和评论导航按结束 -->

    <!-- 产品图片详情 -->
    <div
      class="product-detail"
      v-if="showType==0&&product!==null&&product.description"
    >
      <img
        v-for="(item,index) in product.description"
        :key="index"
        :src="item.image"
        mode="widthFix"
      >
      <img
        src="../../images/bottom.png"
        mode="widthFix"
      >
    </div>

    <!-- 产品评论 -->
    <div
      class="commment"
      v-if="showType==1"
    >
      <div class="row between">
        <div
          v-for="(item,index) in ['全部','差评','中评','好评']"
          :key=index
          :class="commentType==index?'comment-btn selected':'comment-btn'"
          @click="toggleCommentType(index)"
        >{{item}}</div>
      </div>
      <Comment
        v-for="(item,index) in commentInfo"
        :key="index"
        :data="item"
      ></Comment>
      <div
        v-if="hasMoreComment"
        @click="getMoreComment()"
        class="load-more"
      >
        查看更多评论 ∨
      </div>
      <div
        v-if="commentInfo===null||commentInfo.length===0"
        class="load-more"
      >
        暂无评论
      </div>
    </div>

    <!-- 底部立即购买开始 -->
    <div>
      <div class="fixed-bottom">
        <div class="row btn-group">
          <button open-type="contact">
            <img
              src="../../images/customer.png"
              mode="aspectFit"
            >
          </button>
          <img
            :src="collectStatus?'../../images/collection-sel.png':'../../images/collection-nor.png'"
            mode="aspectFit"
            @click="collectProjuct"
          >
          <div
            class="add-cart"
            @click="addCart"
          >加入购物车</div>
          <a
            @click="buyNow"
            class="buy-now"
          >立即购买</a>
        </div>
        <div
          v-if="isIpx"
          class="for-iphonex"
        ></div>
      </div>
      <div
        class="module"
        :style="isIpx?'height:168rpx':'height:100rpx'"
      ></div>
    </div>
  </div>
</template>

<script>
//
import NormalTitle from "@/components/NormalTitle";
import Comment from "@/components/Comment";
import { request, judgeUser } from "@/utils";
export default {
  components: {
    NormalTitle,
    Comment
  },
  data() {
    return {
      isIpx: false,
      showType: 0,
      commentType: 0,
      activedSpec: 0,
      productId: undefined,
      collectStatus: undefined,
      commentInfo: null,
      commentPage: 1,
      hasMoreComment: true,
      product: null
    };
  },
  methods: {
    async getProduct() {
      var res,
        product = {};
      var data = { product_id: this.productId };
      res = await request(
        "/v1/product/detail-swiper",
        "get",
        data,
        "showLoading"
      );
      product.swiperImgs = res.data.items.slice(1);
      res = await request("/v1/product/search", "get", data, null);
      product.headerParam = res.data.items[0];
      res = await request("/v1/product/detail-item", "get", data, null);
      product.specType = res.data.items[0];
      res = await request("/v1/product/detail-param", "get", data, null);
      product.specItems = res.data.items;
      res = await request(
        "/v1/product/detail-description",
        "get",
        data,
        "hideLoading"
      );
      product.description = res.data.items;
      this.product = product;
    },
    async toggleShowType(type) {
      this.showType = type;
      if (type == 1) {
        this.getComments(true);
      }
    },
    async getComments(init) {
      if (init) {
        this.commentPage = 1;
        this.hasMoreComment = true;
      }
      var data = {
        product_id: this.productId,
        comment_level: this.commentType,
        page: this.commentPage,
        perPage: 10
      };
      var res = await request("/v1/comment", "get", data);
      if (res.data) {
        if (init) {
          this.commentInfo = res.data.items;
        } else {
          this.commentInfo = this.commentInfo.concat(res.data.items);
        }
        var meta = res.data._meta;
        if (meta.currentPage == meta.pageCount || meta.pageCount == 0) {
          this.hasMoreComment = false;
        }
      }
    },
    async getMoreComment() {
      if (!this.hasMoreComment) {
        return;
      }
      this.commentPage++;
      this.getComments();
    },
    async toggleCommentType(index) {
      if (this.commentType != index) {
        this.commentType = index;
        this.getComments(true);
      }
    },
    async collectProjuct() {
      var res = await request("/v1/personal-center/" + this.productId, "put");
      this.collectStatus = res.data.status;
    },
    async getcollectStatus() {
      var data = { product_id: this.productId };
      var res = await request(
        "/v1/personal-center/collect-status",
        "get",
        data,
        null
      );
      this.collectStatus = res.data.status;
    },
    async addCart() {
      var data = {
        product_id: this.productId,
        num: 1,
        item_id: this.product.specType[this.activedSpec].id
      };
      var res = await request("/v1/cart", "post", data);
      if (res.data.success) {
        this.globalData.cartRefresh = true;
        wx.showToast({
          title: res.data.message,
          icon: "success",
          duration: 1000
        });
      }
    },
    async buyNow() {
      var res = await judgeUser();
      if (res.data.success) {
        wx.navigateTo({
          url:
            "/pages/account/main?item_id=" +
            this.product.specType[this.activedSpec].id +
            "&product_id=" +
            this.productId +
            "&num=1"
        });
      } else {
        wx.showModal({
          title: "您当前尚未登录",
          content: "是否前去登录？",
          success(res) {
            if (res.confirm) {
              wx.navigateTo({
                url: "/pages/login/main"
              });
            } else if (res.cancel) {
            }
          }
        });
      }
    }
  },
  created() {
    this.isIpx = this.globalData.isIpx;
  },
  onLoad() {
    this.commentType = 0;
    this.showType = 0;
    this.activedSpec = 0;
  },
  mounted() {
    this.productId = this.$root.$mp.query.id;
    this.product = null;
    this.getProduct();
    this.getcollectStatus();
  },
  onShareAppMessage(res) {
    if (!wx.getStorageSync("token")) {
      return {
        title: "Y-store",
        path: "/pages/buffer/main?productId=" + this.$root.$mp.query.id
      };
    }
    return {
      title: "Y-store",
      path: "/pages/detail/main?id=" + this.$root.$mp.query.id
    };
  }
};
</script>

<style>
.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 20rpx;
}
</style>

<style scoped lang="scss">
.container {
  font-size: 24rpx;
  .row {
    display: flex;
    align-items: center;
    margin: 0 25rpx 10rpx;
    flex-wrap: wrap;
  }
  .start-item {
    align-items: flex-start;
    margin-bottom: -6rpx;
  }
  .swiper {
    width: 750rpx;
    height: 450rpx;
    .swiper-item {
      text-align: center;
      width: 750rpx;
    }
  }
  .detail-title {
    // height: 150rpx;
    .vip_price {
      color: #b93a39;
      font-size: 46rpx;
      font-weight: bold;
      margin-right: 20rpx;
    }
    .vip_text {
      margin-top: 18rpx;
      color: #b93a39;
      margin-right: 10rpx;
    }
    .normal_text {
      margin-top: 18rpx;
      color: #6d6d6d;
    }
    .normal_price {
      margin-top: 18rpx;
      text-decoration: line-through;
      color: #6d6d6d;
    }
    .detail_title_text {
      margin: 0rpx 25rpx 0 25rpx;
      font-size: 32rpx;
      font-weight: 600;
    }
  }
  .spec {
    font-size: 22rpx;
    .spec_name {
      color: #747474;
      margin-right: 20rpx;
    }
    .spec-cate {
      display: flex;
      flex-wrap: wrap;
      width: 620rpx;
      .spec_content {
        border: 1rpx solid rgb(160, 160, 160);
        margin-bottom: 15rpx;
        padding: 1rpx 15rpx;
        margin-right: 30rpx;
        border-radius: 5rpx;
        color: rgb(160, 160, 160);
      }
      .spec_content_selected {
        color: #b93a39;
        border: 1rpx solid #b93a39;
      }
    }

    .spec-table {
      display: flex;
      flex-wrap: wrap;
      margin: 0 25rpx;
      width: 700rpx;
      .spec-table-item {
        height: 40rpx;
        display: flex;
        align-items: center;
        width: 350rpx;
        overflow: hidden;
      }
    }
  }
  .around {
    justify-content: space-around;
    font-size: 30rpx;
    width: 700rpx;
    margin: -10rpx 25rpx 40rpx;
    .product-detail-togglebtn {
      padding: 5rpx 0 20rpx;
    }
    .comment-togglebtn {
      padding: 5rpx 0 20rpx;
    }
    .selected {
      color: #cdb27e;
      border-bottom: 1.5px solid #cdb27e;
    }
  }
  .product-detail {
    margin: 0 25rpx;
    img {
      width: 700rpx;
    }
  }
  .commment {
    .between {
      justify-content: space-between;
      margin: 20rpx 25rpx 40rpx;
      .comment-btn {
        width: 160rpx;
        height: 50rpx;
        padding: 10rpx 5rpx;
        border: 1rpx solid #747474;
        border-radius: 50rpx;
        text-align: center;
        line-height: 30rpx;
        font-size: 24rpx;
        color: #747474;
      }
      .selected {
        border: 1rpx solid #cdb27e;
        color: #cdb27e;
      }
    }
    .load-more {
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      color: #747474;
      font-size: 24rpx;
    }
  }

  .btn-group {
    height: 100rpx;
    flex-wrap: nowrap;
    margin: 0;
    background: #fff;
    width: 750rpx;
    color: #fff;
    border-top: 1px solid rgb(190, 190, 190);
    // box-shadow: 0 -1px 1px 0 rgb(190, 190, 190);
    button {
      border: none;
      background-color: transparent;
      box-sizing: border-box;
      width: auto;
      padding: 0;
      margin: 0;
      line-height: 0;
    }
    button::after {
      border: none;
    }
    img {
      height: 80rpx;
      width: 145rpx;
    }
    .add-cart,
    .buy-now {
      width: 230rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 30rpx;
      background: #cf5d68;
    }
    .buy-now {
      background: #cdb27e;
    }
  }
}
</style>
